<template>
	<view style="padding: 30rpx;">
		<uni-forms :modelValue="FormData" :rules="rules" ref="valiForm" label-position="top">
			<!-- <view class="custom-select"><uni-combox :candidates="candidates" placeholder="请选择反馈类型" v-model="formData.city"></uni-combox></view> -->
			<uni-forms-item name="type" class="custom-select">
				<!-- <uni-data-select placeholder="请选择反馈类型" v-model="FormData.type" :localdata="typeList">
				</uni-data-select> -->
				<uni-data-picker placeholder="请选择反馈类型" popup-title="请选择分类" :localdata="typeList" v-model="FormData.type"
					:map="props" @change="onchange" @nodeclick="onnodeclick" @popupopened="onpopupopened"
					@popupclosed="onpopupclosed">
				</uni-data-picker>
			</uni-forms-item>
			<uni-forms-item label="意见反馈" style="margin-top:30px" required name="content">
				<uni-easyinput maxlength="2000" :inputBorder='false' autoHeight type="textarea"
					v-model="FormData.content" placeholder="请写下您对某某的感受，我们将认真听取您的意见，努力提供更优质的服务。" />
			</uni-forms-item>
			<view class="example-body">
				<uni-file-picker limit="6" title="上传图片(最多6张)" @select="select" fileMediatype="image"
					v-model="imageValue" file-extname="png,jpg"></uni-file-picker>
			</view>
			<button class="customer-btn" @click="submit(FormData)">提交</button>
		</uni-forms>
	</view>
</template>

<script>
	import {
		queryDictDataTree,
		addOpinionInfo
	} from "@/api/user.js"
	export default {
		data() {
			return {
				FormData: {
					content: '',
					type: '',
					fileIdList: [],
				},
				props: {
					text: 'name',
					value: 'code'
				},
				typeList: [],
				imageValue: '',
				rules: {
					type: {
						rules: [{
							required: true,
							errorMessage: '请选择类型'
						}]
					},
					content: {
						rules: [{
							required: true,
							errorMessage: '请描述您的问题'
						}]
					}
				}
			};
		},
		onLoad() {
			this.queryDictDataTree({
				"dictType": 'OPINION_TYPE'
			})
		},
		methods: {
			async queryDictDataTree(options) {
				const res = await queryDictDataTree(options);
				let temp = JSON.stringify(res.returnObj);
				//temp = temp.replaceAll("subDictDataList", "children")
				temp = temp.replace(/subDictDataList/g,"children")
				this.typeList = JSON.parse(temp)
			},
			async addOpinionInfo(options) {
				const res = await addOpinionInfo(options);
				if (res.success) {
					uni.showToast({
						title: '反馈成功！'
					})
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 500)
				}
			},
			select(e) {
				console.log(e)
				const tempFilePaths = e.tempFilePaths;
				tempFilePaths.forEach((i) => {
					uni.uploadFile({
						url: "https://1yj-rt.gfox.ltd/nongmao/nb-as/1.0.1/FileService/uploadFile",
						filePath: i,
						name: 'file',
						header: {
							'Cookie': `X-Token=${uni.getStorageSync('X-Token')}`,
							'Content-Type': 'multipart/form-data'
						},
						success: (uploadFileRes) => {
							console.log('uploadFileRes', uploadFileRes.data);
							const res = uploadFileRes.data
							this.FormData.fileIdList.push(JSON.parse(res).returnObj);
						},
						fail: (err) => {
							console.log('err')
						},
						complete: () => {}
					})
				})
			},
			submit(ref) {
				this.$refs['valiForm'].validate().then(res => {
					let tempobj = ref;
					this.addOpinionInfo(tempobj);
				}).catch(err => {
					console.log('err', err);
				})
			},
			onnodeclick(e) {
				console.log(e);
			},
			onpopupopened(e) {
				console.log('popupopened');
			},
			onpopupclosed(e) {
				console.log('popupclosed');
			},
			onchange(e) {
				console.log('onchange:', e);
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
	}

	.custom-select {
		background-color: #F0F1F1 !important;
		border: none;
	}

	.customer-btn {
		background-color: #00B5DD !important;
		color: #fff;
		position: fixed;
		bottom: 30rpx;
		left: 30rpx;
		right: 30rpx;
		border-radius: 8px;
		height: 44px;
		line-height: 44px;
		font-size: 32rpx;
		font-weight: 500;
	}

	.example-body {
		padding: 10px;
		padding-top: 0;
	}
</style>